<template>
  <div class="">
    <ul class="nav">
      <li
        v-for="(item, index) in nav"
        :key="index"
        :class="{ bg: index == $store.state.i }"
        @click="change(index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: ["全部", "未付款", "已付款", "已发货", "已完成"],
      // flag: 0,
    };
  },
  mounted() {},
  methods: {
    change(i) {
      // this.flag = i;
      this.$store.commit("setindex", i);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  height: 50px;
  width: 100%;
  background: goldenrod;
  li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bg {
    background: olivedrab;
    color: #fff;
  }
}
</style>
